<template>
  <div>
    <el-card>
      <div class="flex flex-between flex-center">
        <div class="title">编辑分类</div>
      </div>
    </el-card>
    <el-row class="tab-wrap">

      <el-card>
        <div class="flex flex-end">
          <el-button
            style="margin:10px 0 30px 0"
            type="primary"
            icon="el-icon-plus"
            @click="addCategory"
          >添加分类</el-button>
        </div>

        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#FAFAFA',color:'#666'}"
        >
          <el-table-column
            fixed
            prop="id"
            label="序号"
            min-width="16.5%"
          >
          </el-table-column>
          <el-table-column
            prop="className"
            label="名称"
            min-width="16.5%"
          >
          </el-table-column>
          <el-table-column
            label="排序"
            min-width="16.5%"
          >
            <template slot-scope="scope">
              <!-- {{scope.row.sort}} -->
              <img
                v-if="scope.$index !== 0"
                @click="moveUp(scope,scope.row)"
                style="width: 16px; height: 16px"
                src="../../assets/image/up-icon.png"
              ></img>
              
              <img
                v-if="len !== scope.$index"
                @click="moveDown(scope,scope.row)"
                style="width: 16px; height: 16px"
                src="../../assets/image/down-icon.png"
              ></img>
            </template>

          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="16.5%"
          >
          </el-table-column>
          <el-table-column
            prop="productNum"
            label="卡片数量"
            min-width="16.5%"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            width="100"
            min-width="16.5%"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.stop="deleteItem(scope.row)"
              >删除分类</el-button>
              <el-dialog
                :modal-append-to-body='false'
                title="提示"
                :visible.sync="showDelPop"
                width="280px"
                height="200px"
                style="border-radius: 16px"
                center
              >
                <span>删除分类后此分类下的产品将回到未分类状态,是否确认删除?</span>
                <div
                  slot="footer"
                  class="dialog-footer"
                >
                  <el-button
                    size="small"
                    @click="showDelPop = false"
                  >取 消</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    @click="confirmDelCategory()"
                  >确 定</el-button>
                </div>
              </el-dialog>
              <el-button
                type="text"
                @click="editItemName(scope.row)"
                size="small"
              >修改名称</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </el-row>

    </el-row>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import {
  getCategoryList,
  addProductCategory,
  deleteProductCategory,
  updateProductCategory
} from '@/api/product'

export default {
  methods: {
    handleClick(row) {
      console.log(row)
    }
  },

  data() {
    return {
      showDelPop: false,
      tableData: [],
      len: null,
      itemId:null ,  // 产品ID
    }
  },
  created() {
    // this.$store.state.commit('CATEGORY_LIST',this.tableData)
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.rowDrop()
    this.initData()
    // this.columnDrop()
  },
  methods: {
    // 获取分类列表数据
    initData() {
      getCategoryList({ "pageNo": 1, "pageSize": 10 }).then(res => {
        this.tableData = res.data.datas
        this.tableData.map((item,index) => {
          item.id = index + 1
        })
        this.len = this.tableData.length -1
      })
    },
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    moveDown(scope, item) {
      console.log(scope.$index)
      console.log(item)
      
      this.tableData.splice(scope.$index + 2, 0, item)
      this.tableData.splice(scope.$index, 1)
    },
    // 排序
    moveUp(scope, item) {
      
      this.tableData.splice(scope.$index - 1, 0, item);  // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item
      this.tableData.splice(scope.$index + 1, 1); // 此时数组中有重复元素，把原来被挤下去的元素删除
    },
    // 打开删除弹窗
    deleteItem(item) {
      this.itemId = item.productClassId
      
      
      this.showDelPop = true
    },
    // 确认删除
    confirmDelCategory() {
      deleteProductCategory(this.itemId).then(res => {
        this.tableData = this.tableData.filter(todo => {
          return todo.productClassId != this.itemId
        })
        this.$message.success('删除成功')
        this.showDelPop =  false
      })
    },

    // 修改名称
    editItemName(scope) {
      console.log(scope)
      this.$prompt('修改名称', {
        inputValue: scope.className,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          console.log(value,'<><><><')
          updateProductCategory({
            className: value,
            productClassId: scope.productClassId
          }).then(res => {
            this.tableData = this.tableData.map(todoObj => {
              if (todoObj.productClassId == scope.productClassId) {
                return { ...todoObj, className: value }
              } else return todoObj
            })
            this.$message({
              type: 'success',
              message: '已修改为: ' + value
            })
          }).then(() => {
            console.log('<><><><>')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    },

    addCategory() {
      this.$prompt('添加分类', {
        
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          console.log('成功', value)
          addProductCategory({ className: value }).then(res => {
            this.initData()
          })
          this.$message({
            type: 'success',
            message: '已添加分类: ' + value
          })
        })
        .catch(() => {
          console.log('失败', value)
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
    }
  }
}
</script>
<style scoped>
.tab-wrap {
  padding: 20px 30px;
  box-sizing: border-box;
}

/* .el-button .el-button--text .el-button--small {
  padding: 0px !important;
  margin: 0px !important;
}
.el-button + .el-button {
  padding: 0px !important;
  margin: 0px !important;
} */
</style>
